<template>
  <view class="container">
    <view class="content">
      <view class="list">
        <view class="item" v-for="item in data.list" @click="$goURl(item.url)">
          <uni-icons :type="item.icon" size="20"></uni-icons>
          <view class="right">
            <view class="text">
              {{ item.name }}
            </view>
            <view class="texts">
              {{ item.mark }}
              <uni-icons type="forward" color="#999" size="20"></uni-icons>
            </view>
          </view>
        </view>
        <!-- #ifdef APP-PLUS -->
        <view class="item" @click="updataapp()">
          <uni-icons type="cloud-download" size="20"></uni-icons>
          <view class="right">
            <view class="text">
              版本更新
            </view>
            <view class="texts">
              {{ data.version }}
              <uni-icons type="forward" color="#999" size="20"></uni-icons>
            </view>
          </view>
        </view>
        <!-- #endif -->
      </view>
    </view>
    <view class="l_f_r_sb_c l_g_20">

      <view class="zx_btn btns l_f_r_c_c flex_1"   @click="confirmPopupRef.open()">
        注销
      </view>
      <view class="btns flex_1" @click="logout">
        退出登录
      </view>
    </view>
    <uni-popup ref="share" class="sharep" style="border-top-left-radius: 20px;border-top-right-radius: 20px;">
      <view class="popupcontent">
        <view class="selectBank">
          <text class="selectMdd">钱包规则</text>
          <uni-icons type="closeempty" size="20" class="popupIcon" @click="share.close()"></uni-icons>
        </view>
        <view class="" style="height: 60vh;overflow-y: scroll;">
          <view class="" v-html="data.detail">
          </view>
        </view>
        <view class="btn" @click="$goURl('/pages/personal/wallet/wallet'),share.close()">
          阅读并同意
        </view>
      </view>
    </uni-popup>
    <ConfirmPopup ref="confirmPopupRef" confirmText="确认"
                  title="注销账号"
                  @confirm="bindingFn">
      <template #content>
        <view class="" style="margin-top: 20rpx">
          <up-input class="binding_input" v-model="pwdStr" placeholder="请输入登录密码"></up-input>
          <view class="text_c_r text_5_24" style="margin-top: 15rpx">
            操作不可逆谨慎操作
          </view>
        </view>
      </template>
    </ConfirmPopup>
  </view>
</template>

<script setup>
import {ref, reactive, getCurrentInstance} from "vue";
import {onLoad, onShow, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import ConfirmPopup from "@/components/ConfirmPopup.vue";

const {proxy} = getCurrentInstance();


const confirmPopupRef = ref(null);
const pwdStr = ref('');
const bindingFn = () => {
  if (!(pwdStr.value)) {
    uni.showToast({
      icon: "none",
      title: "请输入密码"
    });
    return false;
  }
  proxy.$request({
    url: `api/logoff/`,
    method: "post",
    data: {password: pwdStr.value},
    success(res) {
      console.log("handleConfirm", res);
      if (res.errno == 0) {
        uni.redirectTo({
          url: '/pages/login/login'
        })
      }
      uni.showToast({
        icon: "none",
        title: res.errmsg
      });

    }
  });
}
const data = reactive({
  detail: '',
  userInfo: {},
  version: 0,
  list: [
    {
      name: '账号信息',
      url: '/pages/personal/set/userinfo',
      icon: 'contact',
      mark: ''
    },
    // {
    // 	name:'代理设置',
    // 	url:'/pages/personal/set/agentSet',
    // 	icon:'gear',
    // 	mark:''
    // },
    {
      name: '账号管理',
      url: '/pages/personal/set/accountManagement',
      icon: 'staff-filled',
      mark: ''
    },
    {
      name: '隐私协议',
      url: '/pages/personal/agreement/agreement?code=0',
      icon: 'info-filled',
      mark: ''
    },
    {
      name: '用户协议',
      url: '/pages/personal/agreement/agreement?code=1',
      icon: 'contact-filled',
      mark: ''
    },
    {
      name: '实名认证',
      url: '/pages/personal/realName/realName',
      icon: 'personadd',
      mark: ''
    },

    {
      name: '关于我们',
      url: '/pages/personal/about/about',
      icon: 'info-filled',
      mark: ''
    },


    // {
    // 	name:'我的钱包',
    // 	url:'/pages/personal/wallet/wallet',
    // 	icon:'wallet-filled',
    // 	mark:''
    // },
    // {
    // 	name:'提现银行卡',
    // 	url:'/pages/personal/bank/bank',
    // 	icon:'wallet',
    // 	mark:''
    // },
    // {
    // 	name:'支付银行卡',
    // 	url:'/pages/order/banklist',
    // 	icon:'wallet',
    // 	mark:''
    // },
    {
      name: '登录密码',
      url: '/pages/personal/password/password?code=0',
      icon: 'locked-filled',
      mark: '修改密码'
    },
    {
      name: '支付密码',
      url: '/pages/personal/password/password?code=1',
      icon: 'locked',
      mark: '修改密码'
    },
    // {
    // 	name:'电话号码',
    // 	url:'/pages/personal/set/setmobile',
    // 	icon:'phone-filled',
    // 	mark:'修改电话号码'
    // }
  ]
})
let share = ref()
let wallet = ref(false)
onLoad((option) => {
  getAgreement()
  wallet.value = uni.getStorageSync('walletType')
  // #ifdef APP-PLUS
  var server = "http://download.guanxikeji.com/updateApp/"; //检查更新地址
  var wgtversion = ''
  plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
    wgtversion = wgtinfo.version
    data.version = wgtversion ? wgtversion : plus.runtime.version
  })
  // #endif
})
onShow(() => {
})
onPullDownRefresh(() => {
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 1000);
})
onReachBottom(() => {
  console.log('onReachBottom')
})

function userInfo() {
  proxy.$userInfo({
    success(res) {
      data.userInfo = res.data
    }
  })
}

function openeallet(url) {
  uni.setStorageSync('walletType', true)
  if (wallet.value) {
    uni.navigateTo({
      url: url
    })
    wallet.value = true
  } else {
    share.value.open('bottom')
    wallet.value = true
  }
}

function getAgreement() {
  proxy.$request({
    url: `api/agreement/?code=${3}`,
    method: 'get',
    success(res) {
      if (res.errno == 0) {
        data.detail = res.data
      }
    }
  })
}

function logout() {
  proxy.$request({
    url: `api/logout/`,
    method: 'POST',
    success(res) {
      if (res.errno == 0) {
        uni.setStorageSync('userInfo', {})
        uni.redirectTo({
          url: '/pages/login/login'
        })
      }

    }

  })
}

function updataapp() {
  //#ifdef APP-PLUS
  var server = "http://download.guanxikeji.com/updateApp/"; //检查更新地址
  var wgtversion = ''
  plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
    wgtversion = wgtinfo.version
    var req = { //升级检测数据
      "appid": plus.runtime.appid,
      "version": wgtversion ? wgtversion : plus.runtime.version,
      'os': plus.os.name == 'Android' ? 0 : 1,
      'is_pk': 0
    };
    uni.request({
      url: server,
      method: 'POST',
      data: req,
      success: (res) => {
        res = res.data
        if (res.errno === 0 && res.data) {
          uni.showLoading({
            title: '更新中'
          })
          uni.downloadFile({
            url: res.data,
            success: (downloadResult) => {
              uni.hideLoading()
              if (downloadResult.statusCode === 200) {
                plus.runtime.install(downloadResult.tempFilePath, {
                  force: false
                }, function (e) {
                  plus.runtime.version = res.errmsg
                  plus.runtime.restart();
                }, function (e) {
                  console.error('install fail...');
                });
              }
            }
          });
        } else if (res.errno === 3) {
          uni.showModal({ //提醒用户更新
            title: "更新提示",
            content: '版本可更新到' + res.errmsg,
            success: (re) => {
              if (re.confirm) {
                plus.runtime.openURL(res.data);
              }
            }
          })
        } else if (res.errno === 1) {
          // this.$api.msg('已是最新版本')
        } else {
          // this.$api.msg('已是最新版本')
          console.log(res)
        }

      },
      fail: (e) => {
        // this.$api.msg('已是最新版本')
        console.log(e)
      }
    })
  });
  //#endif
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30upx;

  .content {
    padding: 30upx;
    background-color: #fff;
    border-radius: 30upx;

    .list {
      .item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30upx;
        // align-items: center;
        .right {
          width: calc(100% - 60upx);
          justify-content: space-between;
          display: flex;
          align-items: center;
          padding-bottom: 30upx;
          border-bottom: 1upx solid #eee;

          .texts {
            font-size: 28upx;
          }

          .texts {
            display: flex;
            align-items: center;
            color: #999;
            font-size: 24upx;
          }
        }
      }

    }

    .list .item:last-child {
      margin-bottom: 0;

      .right {
        border-bottom: none;

      }
    }
  }

  .btns {
    padding: 20upx;
    background-color: #F63B29;
    text-align: center;
    color: #fff;
    border-radius: 20upx;
    margin-top: 30upx;
  }
  .zx_btn{
    color: #F63B29;
    border: 1px solid #F63B29;
    background-color: transparent;
  }
}

.sharep {
  width: 100%;
  margin: 30upx;

  .popupcontent {
    background-color: #f5f5f5;
    border-radius: 30upx 30upx 0 0;
    overflow: hidden;

    .btn {
      background-color: $color4;
      margin: 20upx;
      padding: 20upx;
      text-align: center;
      color: #fff;
      border-radius: 40upx;
    }
  }

  .selectBank {
    width: 94%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    padding: 15px 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    .selectMdd {
      color: #333333;
      font-size: 30upx;
      font-weight: 600;
    }

    .popupIcon {
      position: absolute;
      right: 0%;
      top: 10px;
    }
  }

  .information {
    padding: 10px;
    height: 300px;
    background-color: #f5f5f5;
    overflow-y: scroll;

    .BankList {
      background-color: #fff;
      padding: 15px;
      border-radius: 10upx;
      margin-bottom: 30upx;

      .nameAndBankName {
        margin-bottom: 4px;
        color: #333;

        .name {
          margin-right: 10px;
        }
      }

      .bankAddress {
        color: #333;

        .address {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
